<template>
  <div class="detail-wrapper">
    <!--TODO: 完善朋友详情的界面样式-->
    <a-card>
      <div class="name-avatar-box">
        <a-avatar :src="userInfo?.avatar" :size="100" />
        <div class="name-box">
          <span class="name">{{ userInfo?.username }}</span>
          <a-tag color="success" style="margin-left: 15px">V1</a-tag>
          <div>{{ userInfo?.description }}</div>
        </div>
      </div>
    </a-card>

    <a-card title="信息" style="margin-top: 30px">
      <a-descriptions>
        <a-descriptions-item label="积分" :span="3">{{ userInfo?.score }}</a-descriptions-item>
        <a-descriptions-item label="兴趣" :span="3">
          <div v-if="userInfo?.labels?.length !== 0">
            <a-tag
              v-for="(tag, index) in userInfo?.labels"
              :key="tag.id"
              :color="!index ? 'success' : 'default'"
            >
              {{ tag.name }}
            </a-tag>
          </div>
          <span v-else>无</span>
        </a-descriptions-item>
        <a-descriptions-item label="邮箱" :span="3">{{ userInfo?.email }}</a-descriptions-item>
        <a-descriptions-item label="个人简介" :span="3">
          {{ userInfo?.description }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { getOneUser } from '@/api/user/user';
import { UserBaseInfo } from '@/types/user/user';
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';

const userInfo = ref<UserBaseInfo>();
const route = useRoute();
onBeforeMount(() => {
  let uid = route.query.uid?.toString() ?? '';
  getOneUser(uid).then((res) => {
    console.log(res);
    userInfo.value = res.data;
  });
});
</script>
<style scoped lang="less">
.detail-wrapper {
  margin: 12px;
  min-height: calc(100vh - 136px);
  min-width: calc(100vw - 258px);
  .name-avatar-box {
    display: flex;
    margin: 20px 0;
    .name-box {
      margin-left: 15px;
      .name {
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
}
</style>
